<template>
    <div class="order-container">
        <!-- 顶部导航栏 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"><router-link to="/list">订单管理</router-link></el-menu-item>        
            <el-menu-item index="2" >收款单</el-menu-item>
            <el-menu-item index="3">退款单</el-menu-item>
            <el-menu-item index="4">发货单</el-menu-item>
            <el-menu-item index="5">退货单</el-menu-item>
        </el-menu>
        <div class="input-container">
            <div class="input-area">
                <el-input placeholder='请输入搜索内容' class="el-input-text" prefix-icon="el-icon-search" v-model="input_text"></el-input>

                <el-date-picker v-model='input_start_date' type="date" placeholder="选择日期"></el-date-picker>
                至
                <el-date-picker v-model='input_end_date' type="date" placeholder="选择日期"></el-date-picker>

                <el-button type="default">今天</el-button>
                <el-button type="default">近7天</el-button>
                <el-button type="default">近30天</el-button>

            </div>
            <el-button type="primary">搜索</el-button>
            <el-button type="default">重置</el-button>
            <el-button type="default">订单导出</el-button>
        </div>
        <div class="content-container">
            <router-view></router-view>
            <!-- <el-tabs type="card" v-if="activeIndex === '1'">
                <el-tab-pane label="订单概况"></el-tab-pane>
                <el-tab-pane label="待付款"></el-tab-pane>
                <el-tab-pane label="已完成"></el-tab-pane>
                <el-tab-pane label="已关闭"></el-tab-pane>
                <el-tab-pane label="异常订单"></el-tab-pane>
            </el-tabs>
            <el-tabs type="card"  v-else-if="activeIndex === '2'">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane label="待付款"></el-tab-pane>
                <el-tab-pane label="待发货"></el-tab-pane>
                <el-tab-pane label="已发货"></el-tab-pane>
                <el-tab-pane label="已完成"></el-tab-pane>
                <el-tab-pane label="已关闭"></el-tab-pane>
                <el-tab-pane label="异常订单"></el-tab-pane>
                <el-tab-pane label="预订单"></el-tab-pane>
            </el-tabs>
            <el-tabs type="card"  v-else-if="activeIndex === '3'">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane label="待付款"></el-tab-pane>
                <el-tab-pane label="已完成"></el-tab-pane>
                <el-tab-pane label="已关闭"></el-tab-pane>
                <el-tab-pane label="异常订单"></el-tab-pane>
            </el-tabs>

            <div class="table-area">
                <el-table :data="tableData" style="width: 100%" >
                    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
                    <el-table-column prop="address"  label="地址"> </el-table-column>
                </el-table>
            </div>


            <div class="page-area">
                <el-pagination
                    layout="prev, pager, next"
                    :total="50">
                </el-pagination>
            </div> -->
            <div class="clearfix"></div>
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            activeIndex:'1',
            input_text:'',
            input_start_date:'',
            input_end_date:'',
            tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                orderData:[
                    { orderId:'E20180908174532044900006',
                     goods:[],
                     amount:5,
                     customer:{nickName:'Dovey',realName:'杨正伟',phoneNumber:'18010620509'},
                     createData:'2018-09-08 17:45:32',
                    //  orderStatus:
                     }
                ]

        }
    },
    methods:{
        handleSelect(key, keyPath) {
        console.log(key, keyPath);
        this.activeIndex = key;
      }
    },
    components:{
    }
    
}
</script>

<style lang="scss" scoped>
    .order-container{
        // 输入框区域
        .input-container{
            width: 100%;     

            padding:10px;
            box-sizing: border-box;     

            .input-area{
                margin: 5px 0 5px 0;

                .el-input-text{
                    //输入框
                    width: 200px;
                }
            }            
        }

         // 内容区域
        .content-container{
             background: white no-repeat;
             border-radius: 10px;
            // border: 1px solid purple;  
            .page-area{
                float:right;
                // margin-top: -10;
            }
            .clearfix{
                clear: both;
            }
        }
    }
</style>
